<template>
  <div class="leftTwo">
    <div>
      <moduleTitle :name="title"></moduleTitle>
    </div>
    <div class="two">
      <transition-group tag="div" class="carousel" name="box-slider">
        <div v-for="(item, index) in items" :key="item.id" :class="['box', { large: index === 1 }]">
          <img :src="item.small" />
          <div class="data">
            <div class="num">{{ item.value }}</div>
            <div class="title">{{ item.name }}</div>
          </div>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
import moduleTitle from '@/components/moduleTitle'
import { getDashboard } from '@/api/index/index.js'
import { mapState } from 'vuex'
import Cookies from 'js-cookie'
export default {
  name: 'SdssJddsZhgjWebLeftTwo',
  components: {
    moduleTitle,
    // barEcharts
  },
  data() {
    return {
      title: '数据表分析',
      time: null,
      items: [
        {
          id: 1,
          name: '全量数据区(个)',
          value: '',
          small: require('@/assets/newDashboard/01.png'),
          large: require('@/assets/newDashboard/1.png'),
        },
        {
          id: 2,
          name: '核心数据区(个)',
          value: '',
          small: require('@/assets/newDashboard/02.png'),
          large: require('@/assets/newDashboard/2.png'),
        },
        {
          id: 3,
          name: '主题数据区(个)',
          value: '',
          small: require('@/assets/newDashboard/03.png'),
          large: require('@/assets/newDashboard/3.png'),
        },
      ],
    }
  },
  computed: {
    ...mapState({
      token: (state) => state.user.token,
    }),
  },
  mounted() {
    setInterval(this.rotateBoxes, 3000)
    this.time = setInterval(() => {
      if (Cookies.get('Admin-Token')) {
        this.getData()
      }
    }, 1000)
  },
  methods: {
    rotateBoxes() {
      const firstItem = this.items.pop()
      this.items.unshift(firstItem)
    },
    getData() {
      getDashboard().then((res) => {
        console.log(res, 'dashboard')
        if (res.data.code == 0) {
          clearInterval(this.time)
          const result = res.data.data
          this.items[0].value = result.fullDoseNum
          this.items[1].value = result.kernelNum
          this.items[2].value = result.themeNum
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.leftTwo {
  width: 100%;
  height: 30%;
  position: relative;
}
.two {
  width: 100%;
  position: absolute;
  top: 58%;
  left: 52%;
  transform: translate(-50%, -50%);
}
.carousel {
  margin-left: 1.3021vw;
  height: 100%;
  // padding-top: 0.7813vw;
  display: flex;
  justify-content: center;
  align-items: center;
  // gap: 0.4167vw;
}

.box {
  transition: transform 1s ease;
  transform: scale(0.9); /* 小盒子的缩放比例 */
  position: relative;
  // z-index: 1;
}

.box img {
  display: block;
  width: 70%;
  height: 100%;
}

.large {
  transform: scale(1.1); /* 大盒子的缩放比例 */
  // z-index: 9;
}

.data {
  position: absolute;
  top: 60%;
  left: 35%;
  transform: translate(-50%, -50%);
  // background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 0.2604vw;
  .num {
    text-align: center;
    font-size: 1.25vw;
    font-family: DIN Alternate;
    font-weight: bold;
    color: #ffffff;
  }
  .title {
    margin-top: 0.2604vw;
    text-align: center;
    font-size: 0.625vw;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}
.box-slider-enter-active,
.box-slider-enter-active,
.box-slider-leave-active {
  transition: transform 1s, opacity 1s;
  position: absolute;
}
.box-slider-enter {
  transform: translateX(-100%);
  opacity: 0;
}

/* 当元素开始退出时，我们希望它往右边移动（即正的X值） */
.box-slider-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>
